<template>
	<view class="container">
		<com-head textTit="发票信息" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="headTit">电子发票</view>
		<view class="typeWrap">
			<view class="headWrap">
				<text class="tit">抬头类型</text>
				<text class="getTitle" @click="getTitle()">一键获取抬头</text>
			</view>
			<view class="tabList">
				<view class="list" :class="activeIndex == index ?  'active' :'' "  @click="chiose(index)" v-for="(ele,index) in list" :key="index">{{ele}}</view>
			</view>
			<view class="groupList">
				<!-- 开票方公司 -->
				<view class="list" v-if="!company_id" @click="show2 = true">
					<text>开票方</text>
					<input type="text" value="123412345678987" disabled v-model="form.companyName"/>
					<u-icon name="arrow-right" color="#000000" size="24"></u-icon>
				</view>
				<view class="list">
					<text>发票金额</text>
					<input type="text" disabled value="¥1200" v-model="form.price"/>
				</view>
				<view class="list" v-if="form.rise_type == 2">
					<text>发票抬头</text>
					<input type="text" value="¥1200" v-model="form.rise_name"/>
				</view>
				<view class="list" v-else>
					<text>发票抬头</text>
					<input type="text" @input="serchList()"  v-model.trim="form.rise_name" value="" />
					<view @mousedown.prevent v-if="isHint" class="input-select">
						<scroll-view scroll-y="true" style="max-height:400rpx">
							<view v-for="(ele,index) in companyList" :key="index" @click="chioseName(ele)">
								{{ele.entname}}
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="list" v-if="form.rise_type == 1">
					<text>纳税人识别号</text>
					<input type="text" value="123412345678987" disabled v-model="form.identification"/>
				</view>
				<view class="list" >
					<text>发票类型</text>
					<view class="right">
						<text>增值税电子普通发票</text>
						<!-- <u-icon name="arrow-right" color="#000000" size="24"></u-icon> -->
					</view>
				</view>
				<view class="list" @click="show = true">
					<text>接收方式</text>
					<view class="right">
						<text v-if="form.send_type == 1">邮箱</text>
						<text v-if="form.send_type == 2">短信</text>
						<!-- <text v-if="form.send_type == 3">邮寄</text> -->
						<u-icon name="arrow-right" color="#000000" size="24"></u-icon>
					</view>
				</view>
				<view class="list">
					<text v-if="form.send_type == 1">发送邮箱</text>
					<text v-if="form.send_type == 2">发送手机号</text>
					<input :disabled="show" type="text" value="" v-model="form.send_address" placeholder="请输入" placeholder-style="#999999"/>
				</view>
			</view>
		</view>
		<view class="moreInfo">
			<view class="head">
				<view class="left">
					更多信息 <text>（购买方信息、备注等）</text>
				</view>
				<view class="right" @click="isUnfold = !isUnfold">
					{{isUnfold ? '收起' : '展开填写'}} <u-icon name="arrow-down" color="#999999" size="24" :class="isUnfold ? 'rotateImg':''"></u-icon>
				</view>
			</view>
			<view class="groupItem" :class="{'active-infoContent':isUnfold}">
				<view class="item" >
					<text>公司地址</text>
					<input type="text" v-model="form.address" value="" placeholder="请输入" placeholder-style="color:#999999"/>
				</view>
				<view class="item" >
					<text>手机号码</text>
					<input type="number" v-model="form.phone" placeholder="请输入" placeholder-style="color:#999999"/>
				</view>
				<view class="item" >
					<text>开户银行</text>
					<input type="text" v-model="form.bank" placeholder="请输入" placeholder-style="color:#999999"/>
					<!-- <text style="color: #999999;">请选择</text>
					<u-icon name="arrow-right" color="#000000" size="24" ></u-icon> -->
				</view>
				<view class="item" >
					<text>银行账号</text>
			   		<input type="text" v-model="form.account" placeholder="请输入" placeholder-style="color:#999999"/>
				</view>
				<view class="item">
					<text>备注说明</text>
					<input type="text" v-model="form.remarks" placeholder="请输入" placeholder-style="color:#999999"/>
				</view>
			</view>
			<view class="tag">根据相关政策规定，消费环节使用<text>券等涉及抵扣部分</text>不可开票</view>
			<view class="next" @click="next()">
				下一步
			</view>
		</view>
		<u-picker v-model="show" mode="selector" confirm-color="hsla(42, 48%, 65%, 1)"  :range="selector" @confirm="confirm($event,1)"></u-picker>
		<u-picker v-model="show1" mode="selector" confirm-color="hsla(42, 48%, 65%, 1)"  :range="typeList" @confirm="confirm($event,2)"></u-picker>
		<u-picker v-model="backList" mode="selector" confirm-color="hsla(42, 48%, 65%, 1)"  :range="selectorBack" @confirm="confirm($event,3)"></u-picker>
		<u-picker v-model="show2" mode="selector" confirm-color="hsla(42, 48%, 65%, 1)" :range="compayList" @confirm="confirm($event,4)"></u-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show2:false,
				price:'',
				selector: ["邮箱", "短信"],
				show:false,
				show1:false,
				list:['单位',"个人"],
				list2:[],
				activeIndex:0,
				isUnfold:false,
				backList:false,
				typeList:["增值税专用发票","增值税普通发票"],
				selectorBack:["中国邮政",'中国工商银行'],
				company_id:'',
				form:{
					companyName:'',
					price:'',
					company_id:'',
					rise_type:'1',
					rise_name:'',
					identification:'',
					type:'2',
					address:'',
					phone:'',
					bank:'',
					account:'',
					send_type:'1',
					send_address:'',
					orders_id:'',
					remarks:'',
					user_price_id:'',
					user_id:'',
					kind:1,//kind为2 充值开票
				},
				time: "",
				isHint:false,
				companyList:[],
				compayList:[],
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({ids,price,company_id,type}) {
			this.form.orders_id = ids
			this.form.price = price
			if(company_id){
				this.company_id = company_id
				this.form.company_id = company_id
			}
			if(type){
				this.form.kind = type
			}
			this.getCompany()
		},
		methods: {
			serchList(){
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.getList()
				}, 800);
			},
			async getList(){
				if(this.form.rise_name){
					let {data,code} = await this.$u.api.searchName({searchText:this.form.rise_name});
					if(code){
						this.companyList = data
						this.isHint = true
					}
				}else{
					this.companyList = []
					this.isHint = false
					this.utlis.message("关键字不能为空！")
				}
			},
			async chioseName(ele){
				this.isHint = false
				this.form.rise_name = ele.entname
				if(this.form.rise_name &&  this.form.rise_type == 1){
					let {data,code} = await this.$u.api.searchID({id:ele.id});
					if(code){
						this.form.identification = data
					}
				}
			},
			// 一键获取抬头
			getTitle(){
				let that = this
				wx.chooseInvoiceTitle({
				  success(res) {
					  that.activeIndex = res.type
					  that.form.identification = res.taxNumber
					  that.form.rise_type = res.type == 0 ? 1 : 2
					  that.form.rise_name = res.title
					  that.form.address = res.companyAddress
					  that.form.phone = res.telephone
					  that.form.bank = res.bankName
					  that.form.account = res.bankAccount
				  }
				})
			},
			// 下一步
			next(){
				if(!this.form.company_id){
					this.utlis.Toast('请选择开票方')
					return
				}
				if(!this.form.rise_name){
					this.utlis.Toast('请输入发票抬头')
					return
				}
				// 如果是企业 纳税人识别号不能为空
				if(this.form.rise_type == 2 && this.form.identification){
					this.utlis.Toast('请输入纳税人识别号')
					return
				}
				if(!this.form.send_address){
					this.utlis.Toast('请输入发送地址')
					return
				}
				uni.setStorageSync('invoiceInfo', JSON.stringify(this.form));
				this.utlis.goUrl(`/pages/mine/checkInformation`)
			},
			// 开票公司列表
			async getCompany(){
				let {data,code} = await this.$u.api.getCompany({is_all:1});
				if(code){
					data.forEach((ele)=>{
						this.compayList.push(ele.name)
					})
					this.list2 = data
					console.log(this.compayList,"this.compayList")
				}
			},
			chiose(index){
				this.isHint = false
				this.form.rise_name = ""
				this.form.identification = ''
				this.companyList =[]
				this.activeIndex = index
				this.form.rise_type = index + 1
			},
			confirm(e,type){
				if(type == 1){
					this.form.send_type = e[0] + 1
				}else if(type == 2){
					this.form.type = e[0] + 1
					console.log(this.form.type,"this.form.type")
					if(this.form.type == 1){
						this.form.address = ''
						this.form.phone = ''
						this.form.bank = ''
						this.form.account = ''
					}
				}else if(type == 4){
					this.form.company_id = this.list2[e[0]].id
					this.form.companyName = this.list2[e[0]].name
				}
				console.log(e,this.form.company_id)
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.moreInfo{
		padding-bottom: 100rpx;
		.next{
			width: calc(750rpx - 32rpx - 32rpx);
			line-height: 100rpx;
			background: linear-gradient(140deg,#50DCC2 0%, #007664);
			border-radius: 48rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
		}
		.tag{
			padding: 0 13rpx;
			margin: 21rpx 0 30rpx 0;
			color: #999999;
			font-size: 20rpx;
			text{
				color: #007664;
			}
		}
		.groupItem{
			transition: max-height .6s;
			max-height: 0;
			overflow: hidden;
			background: #FFFFFF;
			border-radius: 6rpx;
			padding: 0 32rpx;
			.item{
				display: flex;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				color: #333333;
				font-size: 28rpx;
				position: relative;
				text{
					margin-right: 38rpx;
				}
				input{
					width: 400rpx;
					height: 100%;
				}
				u-icon{
					position: absolute;right: 0;
				}
			}
			.item:last-child{
				border-bottom: 1rpx solid #F6F7FA;
			}
		}
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #999999;
			font-size: 24rpx;
			margin: 30rpx 0 32rpx 0;
			padding: 0 32rpx;
			.left,.right{
				display: flex;
				align-items: center;
			}
			.left{
				color: #666666;
				font-size: 26rpx;
				text{
					color: #999999;
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}
			.right{
				u-icon{
					margin-left: 13rpx;
					transition: all .6s;
				}
			}
		}
	}
	.headTit{
		font-size: 26rpx;
		color: #666666;
		line-height: 26rpx;
		padding: 40rpx 0 32rpx 0;
	}
	.headWrap{
		display: flex;
		justify-content: space-between;
		align-items:center;
		margin-bottom: 10rpx;
		.getTitle{
			color: #d1b87d;
		}
	}
	.typeWrap{
		width: 686rpx;
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		.groupList{
			margin-top: 20rpx;
			.list{
				height: 108rpx;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				color: #333333;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				input{
					width: 400rpx;
					text-align: right;
					height: 100%;
				}
				.right{
					display: flex;
					align-items: center;
					text{
						margin-right: 26rpx;
					}
				}
			}
			.list:last-child{
				border-bottom: 1rpx solid transparent;
			}
			.input-select{
				width: 626rpx;
				background-color: #F6F7FA;
				position:absolute;
				top: 108rpx;
				left: 0;
				z-index: 999;
				view{
					font-size: 28rpx;
					font-weight: 400;
					color: #808080;
					border-bottom: 1px solid #E6E6E6;
					line-height: 108rpx;
				}
				view:last-child{
					border-bottom:none;
				}
			}
		}
		.tabList{
			display: flex;
			justify-content: space-between;
			.list{
				width: 281rpx;
				line-height: 68rpx;
				border: 1rpx solid #979797;
				border-radius: 10rpx;
				text-align: center;
				color: #333333;
				font-size: 28rpx;
			}
			.active{
				background: linear-gradient(140deg, #50DCC2 0%, #007664);
				color: #FFFFFF;
				border: none;
			}
		}
		.tit{
			color: #333333;
			font-size: 28rpx;
			padding: 33rpx 0 36rpx 0;
			border-radius: 8rpx;
		}
	}
}
.active-infoContent{
	transition: max-height .6s;
	max-height: 500px !important;
}
.rotateImg{
	transform: rotate(-180deg);
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
